<template>
  <view class="container ver-layout">
    <!-- 搜索区域 -->
    <view class="search-container content-hor">
      <view class="search-view content-hor" :class="{'search-view-input':searchInput}" @click="onSearchClick">
        <icon class="search-image fa fa-lg fa-search"></icon>
        <input class="search-input" v-if="searchInput" placeholder="输入关键字" @confirm="confirmInputClick"></input>
        <text v-else>搜索文章</text>
      </view>
      <view style="width:74px;" :style="{ display: searchInput ? 'block' : 'none' }"></view>
      <view class="cancel-view" :class="searchInput?'cancel-view-input':'cancel-view-hide'" @click="onCancelClick">取消
      </view>
    </view>
    <view ref="scrollView" class="scroll-container ver-layout">
      <!-- 历史列表 -->
      <view class="article-his" :class="searchInput?'article-his_hide':''">
        <block v-for="(item,idx) in articleList" :key="idx">
          <view class="article-page" v-if="showPageNum(idx)">
            <text class="article-page-text">第{{ idx / 20 + 1 }}页</text>
          </view>
          <view class="article-item-his article-item" @click="onArticleClick(item)">
            <view class="article-info hor-layout-side-center">
              <view style="font-weight: bold">
                <text>{{ item.author }}</text>
                <text style="margin-left: 10px">{{ item.superChapterName }}</text>
              </view>
              <text>{{ item.niceDate }}</text>
            </view>
            <view class="article-title">{{ item.title }}</view>
          </view>
        </block>
        <view :hidden="!moreLoading" class="weui-loadmore">
          <view class="weui-loading"></view>
          <view class="weui-loadmore__tips">正在加载中...</view>
        </view>
        <view v-if="!moreLoading" style="width: 100%;height: 20px;"></view>
      </view>
      <!-- 搜索列表 -->
      <view :hidden="!searchInput">
        <block v-if="articleListSearch.length">
          <block v-for="(item,idx) in articleListSearch" :key="idx">
            <view class="article-page" v-if="showPageNum(idx)">
              <text class="article-page-text">第{{ idx / 20 + 1 }}页</text>
            </view>
            <view class="article-item" @click="onArticleClick(item)">
              <view class="article-info hor-layout-side-center" style="color:#a6a5a4;">
                <view>
                  <text> {{ item.author }}</text>
                  <text style="margin-left: 10px">{{ item.superChapterName }}</text>
                </view>
                <text style="color:#76787a">{{ item.niceDate }}</text>
              </view>
              <view class="article-title">{{ item.title }}</view>
            </view>
          </block>
        </block>
        <view v-else class="list-no-data">暂无数据</view>
        <view v-if="moreLoading" class="weui-loadmore">
          <view class="weui-loading"></view>
          <view class="weui-loadmore__tips">正在加载中...</view>
        </view>
      </view>
    </view>
    <!-- 回到頂部 -->
    <view class="go-top" @click="onGoTopClick">
      <icon class="go-top-icon fa fa-lg fa-arrow-circle-up"></icon>
    </view>
  </view>
</template>

<script>
import {
  webView,
  wanAndDetail
} from '@/router.js'

export default {
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      menuId: '',
      //文章列表数据
      articlePage: 1,
      articleList: [],
      //文章搜索数据
      hasMore: true,
      articlePageSearch: 1,
      articleListSearch: [],
      moreLoading: false,
      //输入信息
      searchInput: false,
      searchVal: '',
      hasMoreSearch: true,
      useWeChatProgram: true
    }
  },
  onLoad(options) {

    console.log(options)
    let menuId = options.menuId
    this.menuId = menuId
    let title = options.menuName ? options.menuName : '文章列表'
    uni.setNavigationBarTitle({
      title
    })
    this.getArticleHistory()
  },
  methods: {
    showPageNum(idx) {
      return idx % 20 == 0
    },
    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop
    },
    onReachBottom() {
      this.moreLoading = true
      let hasMore = this.hasMore
      let hasMoreSearch = this.hasMoreSearch
      let searchInput = this.searchInput
      hasMore = hasMore && !searchInput
      hasMoreSearch = hasMoreSearch && searchInput
      if (hasMore || hasMoreSearch) {
        this.getArticleHistory();
      } else {
        setTimeout(res => {
          this.moreLoading = false
          uni.showToast({
            title: '暂无更多数据'
          })
        }, 1000)
      }
    },
    // 查询文章历史
    getArticleHistory() {
      let searchVal = this.searchVal
      let menuId = this.menuId
      let articlePage = this.articlePage
      let articlePageSearch = this.articlePageSearch
      let pageNum = searchVal ? articlePageSearch : articlePage
      this.$tools.showLoading()
      uniCloud.callFunction({
        name: 'api-request',
        data: {
          action: "getAdArticleList",
          menuId: this.menuId,
          key: searchVal,
          pageNum,
        },
        success: res => {
          // debugger
          console.log(res)
          uni.hideLoading()
          let result = res.result.data
          let list = result.datas
          list.forEach(article => {
            article.title = this.replaceSpecialChar(article.title)
          })
          if (list.length == 0)
            uni.showToast({
              title: '暂无更多数据'
            })
          if (searchVal) {
            this.setArticleListSearch(list, pageNum)
          } else {
            this.setArticleList(list, pageNum)
          }
        }
      })
    },
    //设置文章数据
    setArticleList(list, pageNum) {
      let hasMore = list.length > 0
      let mArticles = this.articleList
      let articleList = mArticles.concat(list)
      this.articleList = articleList
      this.moreLoading = false
      this.articlePage = pageNum + 1
      this.hasMore = hasMore
    },
    //设置文章搜索数据
    setArticleListSearch(list, pageNum) {
      let hasMoreSearch = list.length > 0
      let mArticles = this.articleListSearch
      let articleListSearch = mArticles.concat(list)
      this.articleListSearch = articleListSearch
      this.moreLoading = false
      this.hasMoreSearch = hasMoreSearch
      this.articlePageSearch = pageNum + 1
    },
    //点击文章
    onArticleClick(e) {
      // console.log(link)
      // #ifdef MP-WEIXIN
      if (this.useWeChatProgram){
        uni.navigateToMiniProgram({
          appId: 'wx365c223d9be13e4e',
          path: `web?u=${e.link}`,
        }).then(res => {
          if (res.length == 1) this.useWeChatProgram = false, this.navigateToDetail(e)
        })
        return
      }
      // #endif
      this.navigateToDetail(e)
    },
    navigateToDetail(e) {
      let title = e.title
      let link = e.link
      let author = e.author
      let niceShareDate = e.niceShareDate
      uni.navigateTo({
        url: wanAndDetail + `?url=${link}&title=${title}&author=${author}&niceShareDate=${niceShareDate}`
      })
    },
    confirmInputClick(e) {
      console.log("confirmInputClick", e)
      let searchVal = e.detail.value
      this.searchVal = searchVal
      this.getArticleHistory()
    },
    onSearchClick(e) {
      this.searchInput = true
      this.hasMoreSearch = true
      this.articleListSearch = []
    },
    onCancelClick() {
      this.searchVal = ''
      this.searchInput = false
      this.articlePageSearch = 1
    },
    onGoTopClick() {
      uni.pageScrollTo({
        scrollTop: 0,//滚动到页面的目标位置
        duration: 300
      });
    },
    replaceSpecialChar(url) {
      url = url.replace(/&rdquo;/g, '"');
      url = url.replace(/&ldquo;/g, '"');
      url = url.replace(/&quot;/g, '"');
      url = url.replace(/&amp;/g, '&');
      url = url.replace(/&lt;/g, '<');
      url = url.replace(/&gt;/g, '>');
      url = url.replace(/&nbsp;/g, ' ');
      // console.log("转义字符", url);
      return url;
    }
  }
}
</script>

<style>
page {
  background: #F4F4F4;
}

.scroll-container {
  width: 100%;
  margin-top: 45px;
  overflow-y: auto;
}

.search-container {
  align-items: center;
  font-size: small;
  position: fixed;
  z-index: 100;
  width: 100%;
  background: #ebe9e9;
  border-bottom: 1px solid #eaeaea;
}

.search-view {
  width: 100%;
  margin: 5px 12px;
  height: 35px;
  color: white;
  border-radius: 35px;
  justify-content: center;
  align-items: center;
  transition: all 0.7s;
  background: #5bab77;
  box-shadow: 0 0 2px 1px #528865;
}

.search-view-input {
  width: calc(100% - 62px);
  padding-left: 12px;
  justify-content: left;
}

.search-image {
  line-height: 20px;
  font-size: medium;
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.search-input {
  width: 60%;
  padding: 5px 0px;
  background: #5bab77;
}

.cancel-view {
  position: absolute;
  width: 52px;
  padding: 5px;
  height: fit-content;
  text-align: center;
  border-radius: 4px;
  margin-right: 8px;
  background: #5bab77;
  box-shadow: 0 0 2px 1px #528865;
}

.cancel-view-hide {
  right: 30px;
  color: #5bab77;
  box-shadow: none;
  transition: all 0.5s linear;
}

.cancel-view-input {
  right: 0px;
  color: #fff;
}

.article-his {
  float: left;
  left: 0px;
  width: 100%;
  position: absolute;
  transition: all 0.7s linear;
}

.article-his_hide {
  left: -200%;
}

.article-page {
  width: 100%;
  text-align: center;
}

.article-page-text {
  color: white;
  padding: 2px 5px;
  font-size: small;
  border-radius: 3px;
  background: #86b0ed;
}

.article-item {
  margin: 12px;
  padding: 7px 10px;
  font-size: small;
  border-radius: 5px;
  background: #aad9b9;
  box-shadow: 0 0 5px 1px #58916b;
}

.article-item-his {
  background: white;
  box-shadow: 0 0 5px 1px #eaeaea;
}

.article-title {
  font-size: small;
  font-weight: bold;
  color: #53473a;
  margin-top: 5px;
}

.article-info {
  color: #ba9979;
}

.loading-view {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
}

.go-top {
  position: fixed;
  bottom: 100px;
  right: 20px;
}

.go-top-icon {
  color: #86b0ed;
  line-height: 1em;
  font-size: 40px;
}
</style>
